<template>
<div>
  <router-link to="/">
    <div class="back">
      <span class="iconfont headerback">&#xe624;</span>
    </div>
  </router-link>
  <div class="banner" @click="handleShowGal">
    <img class="banner-img" :src="this.bannerImg">
    <div  class="banner-info">
    <div class="banner-number">
       <span class="iconfont">&#58892;</span>
      {{gallaryImgs.length}}
    </div>
    <div class="banner-tittle">
      {{this.sightName}}
    </div>
    </div>
  </div>
  <fadeAnimation>
    <commonGallary v-if="showGallary" @close="closeGallary" :gallaryImgs="this.gallaryImgs"></commonGallary>
  </fadeAnimation>
</div>
</template>

<script>
import commonGallary from 'common/Gallary/Gallary'
import fadeAnimation from 'common/fade/fade'

export default {
  name: 'DetailHeader',
  props: {
    sightName: String,
    bannerImg: String,
    gallaryImgs: Array
  },
  data () {
    return {
      showGallary: false
    }
  },
  components: {
    commonGallary,
    fadeAnimation
  },
  methods: {
    preD (e) {
      e.preventDefault()
    },
    closeGallary () {
      document.body.style.overflow = '' // 出现滚动条
      document.removeEventListener('touchmove', this.preD, {passive: false})
      this.showGallary = false
    },
    handleShowGal () {
      document.body.style.overflow = 'hidden'
      document.addEventListener('touchmove', this.preD, {passive: false})
      this.showGallary = true
    }
  }
}
</script>

<style lang="stylus" scoped>
.banner
  padding-bottom 55%
  overflow hidden
  height 0
  position relative
  background #ccc
  .banner-img
    width 100%
.banner-info
  color #fff
  position absolute
  bottom .3rem
  right 0
  left .36rem
  .banner-tittle
    font-size .38rem
    padding-top .2rem
  .banner-number
    width: 1.2rem;
    height: .4rem;
    background: rgba(0,0,0,.5);
    border-radius: .2rem;
    font-size: .24rem;
    color: #fff;
    line-height: .4rem;
    text-align: center;
.back
  z-index 20
  position absolute
  color #fff
  left: .1rem;
  top: .1rem;
  width: .72rem;
  height: .72rem;
  line-height: .72rem;
  display: block
  background-color: #000;
  opacity: .5;
  border-radius: .36rem;
  .headerback
    position: absolute;
    left: 0;
    top: 0;
    color #fff
    display: block;
    width: .72rem;
    line-height: .72rem;
    text-align: center;
    font-size .36rem
</style>
